<template>
  <el-dialog
    title="走访问卷"
    :visible.sync="DialogVisible"
    width="450px"
    center
  >
    <div class="iframe_box">
      <div class="head_box">
        <div class="short_name">{{ item.shortName || "null" }}</div>
        <div class="head_box_right">
          <div class="enterprise_name">{{ item.corpName }}</div>
          <div class="enterprise_xydm">统一代码 {{ item.corpCredit }}</div>
          <div class="head_box_right_three">
            <div class="zoufang_type">{{ item.visitStatus }}</div>
            <div class="wenjuan_type">{{ item.questionnaireStatus }}</div>
            <div class="ewm_icon">
              <img
                v-if="item.qyQustion"
                src="../../assets/images/qrcode-gou.svg"
                alt=""
                class=""
              />
              <img
                v-else
                src="../../assets/images/qrcode-cha.svg"
                alt=""
                class=""
              />
            </div>
          </div>
        </div>
      </div>
      <div class="contant_box">
        <!-- <div class="module_title">基本信息</div> -->
        <div class="detaile_input">
          <div class="detaile_input_name">联系人:</div>
          <div>{{ item.contactPerson }}</div>
        </div>
        <div class="detaile_input">
          <div class="detaile_input_name">职务:</div>
          <div>{{ item.position }}</div>
        </div>
        <div class="detaile_input">
          <div class="detaile_input_name">联系方式:</div>
          <div>
            {{ item.contactPhone }}
          </div>
        </div>
        <div class="detaile_input">
          <div class="detaile_input_name">企业经营地址是否与注册地址一致:</div>
          <div>
            {{ item.addressIsSyn }}
          </div>
        </div>
        <div class="detaile_input">
          <div class="detaile_input_name">走访时间:</div>
          <div>
            {{ item.visitDate }}
          </div>
        </div>
        <div class="detaile_input">
          <div class="detaile_input_name">走访状态:</div>
          <div>
            {{ item.visitStatus }}
          </div>
        </div>
        <div class="detaile_input">
          <div class="detaile_input_name">走访内容:</div>
          <div>
            {{ item.visitRemark }}
          </div>
        </div>
        <div class="zftp_title">走访图片:</div>
        <div class="zftp_contant">
          <img v-if="item.visitPictureUrl" :src="item.visitPictureUrl" alt="" />
          <span v-else>暂无图片</span>
        </div>
      </div>
    </div>
    <!-- <span class="footer">
      <el-button @click="DialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="DialogVisible = false">确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      item: {
        corpName: "",
        corpCredit: "",
        contactPhone: "",
        addressIsSyn: "",
        visitDate: "",
        visitStatus: "",
        visitRemark: "",
        visitPictureUrl: "",
        questionnaireStatus: "",
        qyQustion: "",
        shortName: "",
        contactPerson: "",
      },
      DialogVisible: false,
      url: "",
    };
  },
  mounted() {},
  methods: {
    isShow(item) {
      console.log(item, "itemitem");
      this.item = item;
      this.DialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.iframe_box {
  width: 100%;
  // padding: 20px;
  //   height: 700px;
}

::v-deep .visit-form::-webkit-scrollbar {
  display: none;
}
::v-deep .el-dialog {
  margin-top: 5px !important;
}
.footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.head_box {
  width: 100%;
  height: 125px;
  background: linear-gradient(180deg, #c5d7fb, #e5edfc);
  display: flex;
  padding: 20px;
  background-color: #2b98f0;
  height: 200px;
  align-items: end;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('../../assets/images/wjdc_head_img.png');
}
.short_name {
  width: 50px;
  height: 50px;
  background-color: #d99d9a;
  font-size: 17px;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.head_box_right {
  margin-left: 12px;
  color: #000;
  height: fit-content;
}
.enterprise_name {
  font-size: 18px;
}
.enterprise_xydm {
  margin-top: 5px;
  color: #989898;
}
.head_box_right_three {
  display: flex;
  margin-top: 5px;
  align-items: center;
}
.zoufang_type {
  height: 20px;
  padding: 0 10px;
  background-color: #ec847c;
  color: #fff;
}
.wenjuan_type {
  height: 20px;
  padding: 0 10px;
  background-color: #fde9e7;
  color: #e14d3e;
  margin-left: 10px;
}
::v-deep .el-dialog--center .el-dialog__body {
  padding: 0 !important;
}
.ewm_icon {
  margin-left: 10px;
  img {
    height: 20px;
  }
}
.contant_box {
  padding: 20px;
}
.module_title {
  border-left: 5px solid #2b98f0;
  padding-left: 10px;
}
.detaile_input {
  // height: 50px;
  // line-height: 50px;
  padding: 20px 0;
  display: flex;
  border-bottom: 2px solid #f5f6f7;
}
.detaile_input_name {
  color: #2b98f0;
  min-width: 70px;
}
.zftp_title {
  padding: 20px 0;
  color: #2b98f0;
}
.zftp_contant {
  width: 100%;
  min-height: 150px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #bdbcbc;
}
</style>
